<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >
<head>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css"  th:href="@{/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{/easyui/themes/color.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css" th:href="@{/easyui/demo/demo.css}"/>
    <script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" src="../static/js/outlook.js" th:src="@{/js/outlook.js}"></script>

<script type="text/javascript">
    var _menus = {"menus":[
        {"menuid":"1","icon":"icon-sys","menuname":"控件使用",
            "menus":[
                {"menuid":"12","menuname":"疯狂秀才","icon":"icon-add","url":"http://www.mycodes.net"},
                {"menuid":"13","menuname":"用户管理","icon":"icon-users","url":"demo2.html"},
                {"menuid":"14","menuname":"角色管理","icon":"icon-role","url":"demo2.html"},
                {"menuid":"15","menuname":"权限设置","icon":"icon-set","url":"demo.html"},
                {"menuid":"16","menuname":"系统日志","icon":"icon-log","url":"demo1.html"}
            ]
        },
        {"menuid":"8","icon":"icon-sys","menuname":"员工管理",
            "menus":[
                {"menuid":"21","menuname":"员工列表","icon":"icon-nav","url":"demo.html"},
                {"menuid":"22","menuname":"视频监控","icon":"icon-nav","url":"demo1.html"}
            ]
        },
        {"menuid":"56","icon":"icon-sys","menuname":"部门管理",
            "menus":[
                {"menuid":"31","menuname":"添加部门","icon":"icon-nav","url":"demo1.html"},
                {"menuid":"32","menuname":"部门列表","icon":"icon-nav","url":"demo2.html"}
            ]
        },
        {"menuid":"28","icon":"icon-sys","menuname":"财务管理",
            "menus":[
                {"menuid":"41","menuname":"收支分类","icon":"icon-nav","url":"demo.html"},
                {"menuid":"42","menuname":"报表统计","icon":"icon-nav","url":"demo1.html"},
                {"menuid":"43","menuname":"添加支出","icon":"icon-nav","url":"demo2.html"}
            ]
        },{"menuid":"39","icon":"icon-sys","menuname":"商城管理",
            "menus":[
                {"menuid":"51","menuname":"商品分类","icon":"icon-nav","url":"demo.html"},
                {"menuid":"52","menuname":"商品列表","icon":"icon-nav","url":"demo1.html"},
                {"menuid":"53","menuname":"商品订单","icon":"icon-nav","url":"demo2.html"}
            ]
        }
    ]};

   $(function () {
       var detailItemId;
       var itemId;
/*增删改查方法*/
        manager_tool= {
            _add: function () {
                $("#addDialog").dialog("open");
            },
            detail_add: function () {
                $("#addAgentDialog").dialog("open");
            },
            /*单个删除方法，批量删除待做*/
            _del: function () {
                var rows = $('#easyuiStyle2').datagrid('getSelections');
                if (rows.length > 0) {
                    $.messager.confirm('确定操作', '您确定要删除所选记录吗？', function (flag) {
                        if (flag) {
                            var ids = [];
                            console.log(ids.join(','));
                            $.ajax({
                                url: 'delUser',
                                type: 'post',
                                data: {
                                    id: rows[0].id,
                                },
                                success: function (data) {
                                    $.messager.show({
                                        title: '提示',
                                        msg: '删除成功'
                                    });
                                    $("#easyuiStyle2").datagrid("reload");
                                }
                            })
                        }
                    });
                }
                else {
                    $.messager.alert('提示', '请选择需要删除的记录', 'info');
                }
            },

            /*单个删除方法，批量删除待做*/
            detail_del: function () {
                var rows = $('#detail').datagrid('getSelections');
                if (rows.length > 0) {
                    $.messager.confirm('确定操作', '您确定要删除所选记录吗？', function (flag) {
                        if (flag) {
                            var ids = [];
                            console.log(ids.join(','));
                            $.ajax({
                                url: 'delMyAgent',
                                type: 'post',
                                data: {
                                    id: rows[0].id,
                                },
                                success: function (data) {
                                    $.messager.show({
                                        title: '提示',
                                        msg: '删除成功'
                                    });
                                    $("#detail").datagrid("reload");
                                }
                            })
                        }
                    });
                }
                else {
                    $.messager.alert('提示', '请选择需要删除的记录', 'info');
                }
            },

            /*修改方法*/
            _update:function () {
                var rows = $('#easyuiStyle2').datagrid('getSelected');
                if (rows){
                    $("#update_windows").form('load',rows);
                    $('#enditTab').dialog('open');
                    itemId=rows.id;
                } else {
                    alert('只能选择一条数据进行修改！')
                }

            },

            /*会员代理修改方法*/
            detail_update:function () {
               var rows = $('#detail').datagrid('getSelected');
                //var rows = $('#detail').datagrid('getRows')[index];
                if (rows){
                    $("#detail_update_windows").form('load',rows);
                    $('#detail_enditTab').dialog('open');
                    detailItemId=rows.id;
                    alert("会员代理修改--rows.id=="+rows.id);
                } else {
                    alert('只能选择一条数据进行修改！')
                }

            },

            /*detail:function () {
                var row= $('#easyuiStyle2').datagrid('getSelected');
                $.ajax({
                    url:'findMyAgentJson',
                    type:'post',
                    data:{
                        id:row.id
                    },
                    success:function () {
                        /!*if($('#detail').css("display").arr){

                        }*!/
                        $('#detail').datagrid("reload")
                    }
                })
                $('#detail').datagrid({
                    url:'findMyAgentJson',
                    pagination:true,
                    pageSize:2,
                    pageList:[2,4,6],
                    fitColumns:true,
                    toolbar:'#toolbar_detail',
                    columns:[[
                        {
                            field:'id',
                            title:'自动编号',
                            width:100,
                            checkbox:true
                        },
                        {
                            field:'name',
                            title:'自动编号',
                            width:100,
                        },
                        ,
                        {
                            field:'phone',
                            title:'自动编号',
                            width:100,
                        },
                        {
                            field:'webchat',
                            title:'微信',
                            width:100,
                        },
                        {
                            field:'address',
                            title:'地址',
                            width:100,
                        },
                        {
                            field:'description',
                            title:'简介',
                            width:100,
                        },
                    ]]
                })
            }*/
        }

        $('#enditTab').dialog({
            width:400,
            closed:true,
            title:'修改管理',
            buttons:[{
                text:'保存',
                iconCls:'icon-add-new',
                handler:function () {
                    //修改提交方法
                    var user={}
                    user["id"] = itemId,
                        user['name'] = $('input[id="update_name"]').val(),
                        user['company'] = $('input[id="update_company"]').val(),
                        user['phone'] = $('input[id="update_phone"]').val(),
                        user['address'] = $('input[id="update_address"]').val(),
                        user['description'] = $('input[id="update_description"]').val()
                    $.ajax({
                        url: 'updateUser',
                        type: 'post',
                        contentType:"application/json",
                        data: JSON.stringify(user),
                        success: function (data, response, status) {
                            $.messager.progress('close');
                            $.messager.show({
                                title: '提示',
                                msg: '修改成功',
                            }),
                            $('#enditTab').dialog("close").form('reset'),
                            $('#easyuiStyle2').datagrid('reload')
                        }
                    })
                } },
                {
                    text:'取消',
                    iconCls:'icon-redo',
                    handler:function(){
                        $("#enditTab").dialog("close").form("reset") //取消修改弹窗方法
                    },
                }]
        })

       /*会员代理修改弹窗*/
       $('#detail_enditTab').dialog({
            width:400,
            closed:true,
            title:'修改管理',
            buttons:[{
                text:'保存',
                iconCls:'icon-add-new',
                handler:function () {
                    //修改提交方法
                    var myAgent={}
                    myAgent["id"] = detailItemId,
                    myAgent["userId"] = itemId,
                    myAgent['name'] = $('input[id="detail_update_name"]').val(),
                    myAgent['phone'] = $('input[id="detail_update_phone"]').val(),
                    myAgent['webchat'] = $('input[id="detail_update_webchat"]').val(),
                    myAgent['address'] = $('input[id="detail_update_address"]').val(),
                    myAgent['description'] = $('input[id="detail_update_description"]').val()
                    $.ajax({
                        url: 'updateMyAgent',
                        type: 'post',
                        contentType:"application/json",
                        data: JSON.stringify(myAgent),
                        success: function (data, response, status) {
                            $.messager.progress('close');
                            $.messager.show({
                                title: '提示',
                                msg: '修改成功',
                            }),
                            $('#detail_enditTab').dialog("close").form('reset'),
                            $('#detail').datagrid('reload')
                        }
                    })
                } },
                {
                    text:'取消',
                    iconCls:'icon-redo',
                    handler:function(){
                        $("#detail_enditTab").dialog("close").form("reset") //取消修改弹窗方法
                    },
                }]
        })


           /*新增的弹窗方法内容*/
           $("#addDialog").dialog({
              width:400,
               closed:true,
               title:'新增管理',
               buttons:[{
                   text:'提交',
                   iconCls:'icon-add-new',
                   handler:function () {
                    //新增提交方法
                       $.ajax({
                           url:'saveUser',
                           type:'post',
                           data:{
                               name:$('input[name="name"]').val(),
                               company:$('input[name="company"]').val(),
                               phone:$('input[name="phone"]').val(),
                               address:$('input[name="address"]').val(),
                               description:$('input[name="description"]').val()
                           },
                           success:function (data,response,status) {
                               $.messager.progress('close');
                               $.messager.show({
                                   title: '提示',
                                   msg: '新增管理成功',
                               }),
                               $('#addDialog').dialog("close").form('reset'),
                               $('#easyuiStyle2').datagrid('reload')
                           }
                       })

                   } },
                   {
                       text:'取消',
                        iconCls:'icon-redo',
                        handler:function(){
                            $("#addDialog").dialog("close").form("reset") //取消弹窗方法
                         },
                   }]
           });
       })

    /*新增的弹窗方法内容*/
    $("#addAgentDialog").dialog({
        width:400,
        closed:true,
        title:'新增会员代理管理',
        buttons:[{
            text:'提交',
            iconCls:'icon-add-new',
            handler:function () {
                //新增提交方法
                $.ajax({
                    url:'saveMyAgent',
                    type:'post',
                    data:{
                        parentId:itemId,
                        portrait:$('input[name="detail_portrait"]').val(),
                        name:$('input[name="detail_name"]').val(),
                        phone:$('input[name="detail_phone"]').val(),
                        webchat:$('input[name="detail_webchat"]').val(),
                        company:$('input[name="detail_company"]').val(),
                        address:$('input[name="detail_address"]').val(),
                        description:$('input[name="detail_description"]').val()
                    },
                    success:function (data,response,status) {
                        $.messager.progress('close');
                        $.messager.show({
                            title: '提示',
                            msg: '新增管理成功',
                        }),
                            $('#addAgentDialog').dialog("close").form('reset'),
                            $('#detail').datagrid('reload')
                    }
                })

            } },
            {
                text:'取消',
                iconCls:'icon-redo',
                handler:function(){
                    $("#addAgentDialog").dialog("close").form("reset") //取消弹窗方法
                },
            }]
    });
   </script>


    <!--easyuiStyle2 增删改查方式 2-->
    <script>

        $(function () {
            $("#easyuiStyle2").datagrid({
                url:'findUserJson',
                rownumbers:true,
                fitColumns:true,
                pagination:true,
                pageSize:5,
                pageList:[5,10,15],
                pageNumber:1,
                toolbar:'#toolbar2',
                columns:[[
                    {
                        field:'id',
                        title:'自动编号',
                        width:100,
                        checkbox:true
                    },
                    {
                        field:'parentId',
                        title:'上级ID',
                        width:100,
                    },{
                        field:'portrait',
                        title:'头像',
                        width:100,
                    },{
                        field:'name',
                        title:'品名',
                        width:100,
                    },
                    {
                        field:'phone',
                        title:'规格',
                        width:100,
                    },
                    {
                        field:'webchat',
                        title:'微信',
                        width:100,
                    },
                    {
                        field:'company',
                        title:'价格',
                        width:100,
                    },

                    {
                        field:'address',
                        title:'编码',
                        width:100,
                    },
                    {
                        field:'description',
                        title:'简介',
                        width:100,
                    }
                ]],
                onSelect:function (index,row) {
                    itemId=row.id;
                    alert("---parentId-"+row.parentId);
                    $('#detail').datagrid({
                        url:'findAgentJson?parentId='+row.parentId,
                        title:'拥有会员',
                        rownumbers:true,
                        fitColumns:true,
                        pagination:true,
                        pageSize:5,
                        pageList:[5,10,15],
                        pageNumber:1,
                        toolbar:'#toolbar_detail',
                        columns:[[
                            {
                                field:'id',
                                title:'自动编号',
                                width:100,
                                checkbox:true
                            },
                            {
                                field:'parentId',
                                title:'上级ID',
                                width:100,
                            },{
                                field:'portrait',
                                title:'头像',
                                width:100,
                            },{
                                field:'name',
                                title:'品名',
                                width:100,
                            },
                            {
                                field:'phone',
                                title:'规格',
                                width:100,
                            },
                            {
                                field:'webchat',
                                title:'微信',
                                width:100,
                            },
                            {
                                field:'company',
                                title:'价格',
                                width:100,
                            },

                            {
                                field:'address',
                                title:'编码',
                                width:100,
                            },
                            {
                                field:'description',
                                title:'简介',
                                width:100,
                            }
                        ]],
                    });

                }
            })
        })

    function addTab(title,usrl) {
        if($('#tt').tabs('exists',title)){
            $('#tt').tabs('select',title);
        }else {
            var content='<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    }
    </script>
</head>
    <body class="easyui-layout">
    <div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
            background: url(../static/images/manager-top-bg.gif) #7f99be repeat-x center 50%;
            line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
        <span style="float:right; padding-right:20px;" class="head">欢迎 疯狂秀才 <a href="#" id="editpass">修改密码</a> <a href="#" id="loginOut">安全退出</a></span>
        <span style="padding-left:10px; font-size: 16px; "><img src="images/blocks.gif" width="20" height="20" align="absmiddle" /> jQuery.EasyUI- 1.2.2 应用实例</span>
    </div>
    <div region="west" style="width: 180px;">
        <div id="nav" class="easyui-accordion" style="width: 300px;height: 200px;">
        </div>
    </div>
    <div region="center"   >
        <!--datagrid html布局内容-->
        <table id="easyuiStyle2" title="user_list"></table>
        <div id="toolbar2"><!--工具栏按钮布局内容-->
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="manager_tool._add()">新增</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-update" onclick="manager_tool._update()">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="manager_tool._del()">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="manager._cancel()">取消</a>
        </div>

        <!--datagrid 行对应详情布局内容-->
        <table class="detail" id="detail" style=""></table>
        <div id="detail_toolbar"><!--工具栏按钮布局内容-->
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="manager_tool.detail_add()">新增</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-update" onclick="manager_tool.detail_update()">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="manager_tool.detail_del()">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="manager.detail_cancel()">取消</a>
        </div>

        <!--文件上传-->
        <div style="border: solid 1px">
            <form enctype="multipart/form-data" method="post" th:action= "@{/user/testuploadimg}">
                图片<input type="file" name="file"/>
                <input type="submit" value="上传"/>
            </form>
        </div>
    </div>


<!--新增弹窗html布局-->
    <div id="addDialog" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true">
        <form method="post">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>头像:</td>
                    <td><input required="true" type='text' name='portrait'></input></td>
                </tr>
                <tr>
                    <td>昵称:</td>
                    <td><input required="true" type='text' name='name'></input></td>
                </tr>
                <tr>
                    <td>电话:</td>
                    <td><input required="true" type='text' name='phone'></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='webchat'></input></td>
                </tr>
                <tr>
                    <td>公司:</td>
                    <td><input required="true" type='text' name='company'></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='address'></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='description'></input></td>
                </tr>
            </table>
        </form>
    </div>

    <!--新增会员代理弹窗html布局-->
    <div id="addAgentDialog" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true">
        <form method="post">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>头像:</td>
                    <td><input required="true" type='text' name='detail_portrait'></input></td>
                </tr>
                <tr>
                    <td>昵称:</td>
                    <td><input required="true" type='text' name='detail_name'></input></td>
                </tr>
                <tr>
                    <td>电话:</td>
                    <td><input required="true" type='text' name='detail_phone'></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='detail_webchat'></input></td>
                </tr>
                <tr>
                    <td>公司:</td>
                    <td><input required="true" type='text' name='detail_company'></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='detail_address'></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='detail_description'></input></td>
                </tr>
            </table>
        </form>
    </div>

    <!--修改弹窗html布局-->
    <div id="enditTab" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true" >
    <form method="post" id="update_windows">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>头像:</td>
                    <td><input required="true" type='text' name='phone' id="update_portrait"></input></td>
                </tr>
                <tr>
                    <td>昵称:</td>
                    <td><input required="true" type='text' name='name' id="update_name"></input></td>
                </tr>
                <tr>
                    <td>电话:</td>
                    <td><input required="true" type='text' name='phone' id="update_phone"></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='phone' id="update_webchat"></input></td>
                </tr>
                <tr>
                    <td>公司:</td>
                    <td><input required="true" type='text' name='company' id="update_company"></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='address' id="update_address"></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='description' id="update_description"></input></td>
                </tr>
            </table>
        </form>
    </div>

    <!--修改会员代理弹窗html布局-->
    <div id="detail_enditTab" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true" >
    <form method="post" id="detail_update_windows">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>昵称:</td>
                    <td><input required="true" type='text' name='name' id="detail_update_name"></input></td>
                </tr>
                <tr>
                    <td>电话:</td>
                    <td><input required="true" type='text' name='phone' id="detail_update_phone"></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='webchat' id="detail_update_webchat"></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='address' id="detail_update_address"></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='description' id="detail_update_description"></input></td>
                </tr>
                <tr>
                    <td><a href="#" class="easyui-linkbutton" iconCls="" onclick="manager_tool.detail_editSave()">保存</a></td>
                    <td><a href="#" class="easyui-linkbutton"  iconCls="" onclick="javascript:('#detail_enditTab').dialog('close')">取消</a></td>
                </tr>
            </table>
        </form>
    </div>

</body>
</html>